<!doctype html>
<html lang=" ">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <!--  把元素渲染到浏览器 由宿主包提供-->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <!-- 做语法转换 将书写的一种语法 变成另一种语法， 更多的时候我们用babel来做语法降级，在当前这个场景里我们用label处理JSX
   Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
      // 挂上type="text-babel" 将意味这babel将接管所有代码的解析
      // 浏览器会看script 的type在决定解不解析 如果不写type 默认为text/javaScript 此时浏览器以js方式解析
      // module 如果不是这两个 浏览器就完全不会看script里的代码

      // babel 会监听全局的document.contentLoad 【意味着当前页面的所有script标签全部生成完毕】
      // babel 直接拿到所有script 标签 document.getElementByTagName (另一种cli babel）
      // 读script上的属性 getAttributes("type")
      // 如果他发现type = text/babel
      // 他把里面的代码全部拿过来，然后用他自己的transform方法转换一遍，将转换后的代码直接新建一个
      //script标签插入到head标签

    console.log("React", React, ReactDOM)
    // 第一个参数： React工作节点 也是我们所说的React 工作开始的地方
    // 第二个参数： 必须是React 元素（通过React核心包的createElement所生成的元素叫React元素）
    // render 他会拿到对应的react 的工作节点，然后他将对应的react元素去变成浏览器宿主所能接受的真是的dom元素
    const reactDivElement = (<div>
        hello jsx
        <span>i an child span</span>
    </div>)
    // div 套子元素， 以及我想给div 绑定事件
    console.log("reactDivElement", reactDivElement)
    const root = ReactDOM.createRoot(document.getElementById("root"))
    root.render(reactDivElement)
  </script>
</body>
</html>